<template>
    <div>
      <!-- 面包屑导航条 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据中心</el-breadcrumb-item>
        <el-breadcrumb-item>联系人管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!--用于添加卡片（整体展示）-->
      <el-card class="box-card">
        <!--模糊查询表单-->
        <el-form :model="searchForm" class="demo-form-inline" >
          <el-row :gutter="20">
            <el-form-item>
              <el-col :span="4">
                <!--模糊查询输入框 v-model是绑定的数据-->
                <el-input placeholder="联系人名称" v-model="searchForm.name"></el-input>
              </el-col>
                <!--搜索+添加的按钮 type可以修改按钮的颜色-->
              <el-button plain type="info" @click="searchList">搜索</el-button>
              <el-button  type="primary" @click="toAdd">添加联系人</el-button>
              <el-button @click="dialogFormVisible=true" type="info">导入</el-button>
              <el-button @click="exportExcel" type="info">导出</el-button>
            </el-form-item>
          </el-row>
        </el-form>
        <!--列表展示 :data是数据绑定 从后台获取的返回数据进行赋值-->
        <el-table
          :data="linkmanList"
          style="width: 100%">
          <!--一列的字段 label(需要修改)是上面的行名称 prop（需要修改）是绑定的后台数据-->
          <el-table-column
            prop="id"
            label=""
            width="90">
            <!--<template slot-scope="scope">
              {{scope.$index+1}}
            </template>-->
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            width="150">
          </el-table-column>
          <el-table-column
            prop="sex"
            label="性别"
            width="150">
            <template slot-scope="scope">
              {{scope.row.sex|sexFit}}
            </template>
          </el-table-column>
          <el-table-column
            prop="tel"
            label="电话"
            width="170">
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            width="170">
          </el-table-column>
          <el-table-column
            prop="recvAddress"
            label="收件地址"
            width="170">
          </el-table-column>
          <el-table-column
            prop="position"
            label="职位"
            width="150">
            <template slot-scope="scope">
              {{scope.row.position|positionFit}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="180">
            <!--点击按钮 需要绑定@click的时间 例如 @click="add"-->
            <template slot-scope="scope">
              <el-dropdown split-button type="primary"  size="mini" >
                操作
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item >
                    <el-button type="text" @click="LookDetail(scope.row.id)">
                      修改
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item >
                    <el-button type="text" @click="LookDetailLinkMan(scope.row.id)">
                      详情
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item style="color: crimson">
                    <el-button type="text" @click="deleteLinkMan(scope.row.id)" style="color: crimson">
                      删除
                    </el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
          <!--分页的组件 需要将total,pagenum,pagesize重新定义并且赋值完成分页-->
          <!--用于分页的插件-->
        </el-table>
<!--        <el-dialog title="导入excel" :visible.sync="dialogFormVisible" width="26%">
          <el-upload
            class="upload-demo"
            drag
            action="/api/linkman/importExcel"
            :headers="auth"
            :on-success="exportOk"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">上传联系人excel</div>
          </el-upload>
        </el-dialog>-->
        <el-dialog :close-on-click-modal="false" title="导入用户" :visible.sync="dialogFormVisible" width="26%"> <!--用户表单框 -->
          <el-upload
            class="upload-demo"
            drag
            action="http://localhost:8080/linkman/importExcel"
            :headers="auth"
            :on-success="exportOk"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">上传用户excel数据</div>
          </el-upload>
        </el-dialog>
      </el-card>
      <el-pagination
        :current-page="pagenum"
        :page-size="pagesize"
        :page-sizes="[5, 10, 20, 40]"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
</template>

<script>
  export default {
    name: 'MaterialMenu',
    data(){
      return{
        linkmanList:[],
        searchForm:{},
        /*初始化分页数据*/
        pagenum:0,
        pagesize:5,
        total:0,
        dialogFormVisible:false,
        auth:{token:null}
      }
    },
    methods:{
      /*方法*/
      /*向后端发送请求*/
      /*请求数据进行赋值渲染*/
      /*分页进行改变时触发的函数*/
      exportExcel:function(){
        location.href="http://localhost:8080/linkman/exportExcel";
      },
      LookDetailLinkMan:function(id){
        this.$router.push({path:'/lookDetail',query:{id:id}});
      },
      exportOk:function(){
        this.dialogFormVisible = false;
        this.searchList();
      },
      toAdd:function(){
        this.$router.push('/AddLinkMan')
      },
      searchList:function(){
        this.$http.post("/linkman/list/"+this.pagenum+"/"+this.pagesize,this.searchForm).then((res)=>{
          this.linkmanList = res.data.result.list;
          this.total = res.data.result.total;
          }
        )
      },
      handleSizeChange: function (val) {
        /*将数据重新赋值，并且向后端发送请求*/
        this.pagesize = val;
        this.searchList();
      },
      handleCurrentChange: function (val) {
        /*将数据重新赋值，并且向后端发送请求*/
        this.pagenum = val;
        this.searchList();
      },
      LookDetail:function (id) {
        this.$router.push({path:'/AddLinkMan',query:{id:id}});
      },
      deleteLinkMan:function (id) {
        this.$http.delete("/linkman/deleteLinkMan/"+id).then((res)=>{
          if (res.data.success){
            this.$message({
              message:"删除成功",
              type:"success"
            })
            this.searchList();
          }else{
            this.$message.error("删除失败！");
          }
          }
        )
      },
    },
    mounted () {
      /*初始化赋值*/
      this.searchList();
    },
    filters:{
      positionFit:function (val) {
        if (val=="0"){
          return "董事长";
        }
        if (val=="1"){
          return "经理";
        }
        if (val=="2"){
          return "组长";
        }
        if (val=="3"){
          return "销售";
        }
        if (val=="4"){
          return "工艺员";
        }
      },
      sexFit:function (val) {
        if (val=="0"){
          return "男";
        }
        if (val=="1"){
          return "女";
        }
      }
    }
  }
</script>

<style scoped>

</style>
